<template>
	<label type="button" class="btn" @click="uploadImage"> 
		<view v-show="imgSrc===''">
			<uni-icons type="upload-filled" size="70" color="rgb(24,144,255)"></uni-icons><br>
			<text style='font-size: 15px; font-weight:700'>{{content}}</text>
			<view class="little">支持格式：.png .jpg .svg .gif,单个文件不能超过20MB</view>
		</view>
		<image :src="imgSrc" mode="heightFix"></image><br>
		<input type="input" disabled="disabled" >
	</label>
</template>

<script>
	import request from '@/utils/api.js'
	export default {
		onLoad() {
			console.log('load');
		},
		props: ['content'],
		data() {
			return {
				imgSrc: ''
			}
		},
		methods: {
			uploadImage() {
				let that = this
				uni.chooseImage({
					count: 1,
					sourceType: ['album'],
					success: function(res) {
						let tempFilePaths = res.tempFilePaths
						let key = `upload_pic_${new Date().getTime()}`
						// 获取上传凭证
						request('/oss/auth').then(resp => {
							let uploadToken = resp.data
							uni.uploadFile({
								url: 'http://upload-z2.qiniup.com',
								filePath: tempFilePaths[0],
								name: 'file',
								formData: {
									'token': uploadToken,
									'key': key
								},
								success: (res) => {
									that.imgSrc = JSON.parse(res.data).fileUrl
									that.$emit('updateRef', that.imgSrc)
								},
								fail: (err) => {
									console.log('err', err);
								}
							})
						})
					},
					fail:function(err){
						console.log('文件选择失败',err);
					}
				})
			}
		}
	}
</script>

<style>
	.little{
		margin-top: 10px;
		font-size:12px;
		color:#AEAEB2;
	}
</style>
